<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
	<meta name="robots" content="index, follow">
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css?9188" th:href="@{/css/bootstrap.min.css?9188}">
	<link rel="stylesheet" type="text/css" href="css/style.css?8116" th:href="@{/css/style.css?8116}">
	<link rel="stylesheet" type="text/css" href="css/animate.min.css?7456" th:href="@{/css/animate.min.css?7456}">
	<link href='https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <title>sign up</title>


    
<!-- Analytics -->
 
<!-- Analytics END -->
    
</head>
<body>


<!-- Main container -->
<div class="page-container">
    
<!-- bloc-3 -->
<div class="bloc bgc-azure bg1 full-width-bloc d-bloc" id="bloc-3">
	<div class="container bloc-sm">
		<div class="row">
			<div class="col">
				<nav class="navbar navbar-light row navbar-expand-md nav-invert link-style" role="navigation">
					<button id="nav-toggle" type="button" class="ui-navbar-toggler navbar-toggler border-0 p-0" data-toggle="collapse" data-target=".navbar-1893" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse navbar-1893">
						<ul class="site-navigation nav navbar-nav">
							<li class="nav-item">
								<a href="loginup.html" th:href="@{/}" class="a-btn ltc-white">首页</a>
							</li>
							<li class="nav-item">
								<a href="loginin.html" th:href="@{/toLogin}" class="a-btn ltc-white">登录</a>
							</li>
						</ul>
					</div><a th:href="@{/}" class="navbar-brand mr-0 ltc-white link-style welcome" href="index.html">欢迎使用</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- bloc-3 END -->

<!-- bloc-4 -->
<div class="bloc l-bloc" id="bloc-4">
	<div class="container bloc-lg">
		<div class="row">
			<div id="div_form_38623" class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
				<form id="form_38623" method="get" action="#"  >
					<div class="form-group">
						<label>
							用户名<br>
						</label>
						<input id="name_38623" name="username" class="form-control" required data-validation-required-message="请输入用户名。" placeholder="请输入用户名……" />
                        <div style="color:red">
                            <label v-show="usern">用户名格式不正确！长度：3-8，不含特殊字符</label>
                        </div>
					</div>
					<div class="form-group">
						<label>
							邮箱<br>
						</label>
						<input id="email_38623" name="email" class="form-control" type="email" data-error-validation-msg="邮箱格式不正确。" required placeholder="请输入邮箱……" data-validation-required-message="请输入邮箱来注册。" />
						<div style="color:red">
							<label v-show="hide_error">邮箱格式不正确</label>
						</div>
					</div>
					<div class="">
						<label>
							邮箱验证码<br>
						</label>
						<div class="row">
							<div class="col-lg-9">
								<div class="form-group">
									<input id="code_38623" name="code" class="form-control field-style" placeholder="点击获取验证后在你的邮箱查看验证码……"  />
								</div>
							</div>
							<div class="col-sm-3">
								<div class="">
								<button type="button" v-on:click="sendCode()"  class="btn btn-sm btn-button-style btn-azure bloc-button" >
									获取验证码
								</button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label>
							密码<br>
						</label>
						<input name="password" class="form-control" placeholder="请输入密码……" type="password" id="input_password" />
                        <div style="color:red">
                            <label v-show="userp">密码格式错误！长度：6-20</label>
                        </div>
					</div>
					<div class="form-group">
						<label>
							请重复输入密码<br>
						</label>
						<input class="form-control" placeholder="请输入密码……" type="password" id="input_repeatPassword" />
						<div style="color:red">
							<label v-show="usert">两次密码不一致</label>
						</div>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" id="optin_38623" name="optin_38623" data-validation-minchecked-minchecked="1" data-validation-minchecked-message="必须同意才能继续使用。" checked="checked" />
						<label class="form-check-label">
							同意用户使用协议和隐私政策
						</label>
					</div>

					 <a href="loginin.html" th:href="@{/toLogin}" class="btn btn-lg btn-style-none btn-d text-w-sm btn-已有账号？登录……-style">已有账号？登录……<br></a>
				</form>
				<button type="button"  v-on:click="register()" class="btn btn-lg btn-button-style btn-azure bloc-button" >
					注册
				</button>
			</div>
		</div>
	</div>
</div>
<!-- bloc-4 END -->

<!-- ScrollToTop Button -->
<a class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1',this)"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path class="scroll-to-top-btn-icon" d="M30,22.656l-14-13-14,13"/></svg></a>
<!-- ScrollToTop Button END-->


<!-- bloc-2 -->
<div class="bloc l-bloc" id="bloc-2">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-12">
				<h5 class="mg-md text-lg-center">
					Thank ♥ You
				</h5>
				<p class="text-lg-center">
					Renxiang Jia,2024
				</p>
			</div>
		</div>
	</div>
</div>
<!-- bloc-2 END -->

</div>
<!-- Main container END -->

<script th:src="@{/js/bootstrap.bundle.min.js?1413}" src="./js/bootstrap.bundle.min.js?1413"></script>
<script th:src="@{/js/blocs.min.js?3842}" src="./js/blocs.min.js?3842"></script>
<script th:src="@{/js/jqBootstrapValidation.js}" src="./js/jqBootstrapValidation.js"></script>
<script th:src="@{/js/formHandler.js?2118}" src="./js/formHandler.js?2118"></script>
<script th:src="@{/js/lazysizes.min.js}" src="./js/lazysizes.min.js" defer></script>

<script th:src="@{/js/jquery.min.js}"  type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/vue.js}"  type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/axios.min.js}"  type="text/javascript" charset="utf-8"></script>

<!--js脚本，使用Vue框架-->
<script>
	var registerForm = new Vue({
		el:"#div_form_38623",  //作用范围：id=form_38623的标签及其内部
		//定义数据
		data: {
			// jump_url:"http://114.116.234.63:8080/toLogin", //注册成功需要跳转的页面地址，服务器
			jump_url:"http://localhost:8080/toLogin", //注册成功需要跳转的页面地址，本地

			//一些常量
			OK :200,
			CODE_ERROR:201,
			NAME_EXIST:202
		},
        data () {
            return {
                hide_error: false,
                usern:false,
                userp:false,
				usert:false
            }
        },
		//定义方法
		methods: {
			//1.注册方法
			register:function () {
				var username = $("#name_38623").val();
				var email = $("#email_38623").val();
				var code = $("#code_38623").val();
				var password = $("#input_password").val();
				var repeatPassword = $("#input_repeatPassword").val();
                var REGEX_NAME=/[a-zA-Z]{3,8}/;
                this.usern = false;
                this.userp=false;
                this.usert=false;
                var url = this.jump_url;
                if(!REGEX_NAME.test(username)){
                    this.usern = true;
                }
                if(password.length<6){
                    this.userp=true;
                }
                if(password.length>20){
                    this.userp=true;
                }
                if(password!=repeatPassword){
                    this.usert=true;
                }
                if(!this.usern){
                    if(!this.userp){
                        if(!this.usert){
                            axios({
                                method: "post",
                                url: "user/register",
                                params :{username,email,code,password}
                            })
                                .then(function (value) {

                                    if(value.data.code == 200){
                                        alert("注册成功！即将跳转到登录页面");
                                        //注册成功跳转到登录页面
                                        window.location.href = "http://localhost:8080/toLogin";//本地
										// window.location.href = "http://114.116.234.63:8080/toLogin";//服务器
                                    }else if(value.data.code == 201){
                                        alert("验证码错误");
                                    }else if(value.data.code == 202){
                                        alert("用户名已存在");
                                    }
                                })
                                .catch();
						}
                    }
                }
			},
			//2.发送验证码方法
			sendCode:function (){
			    var REGEX=/[1-9][0-9]{7,11}@[a-zA-Z0-9]{2,4}.com/;
			    var REGEX_BJTU=/[1-9][0-9]{7}@bjtu.edu.cn/;
				var email = $("#email_38623").val();
				var type = "1";
				this.hide_error = false;
                this.hide_error = REGEX.test(email)?false:!REGEX_BJTU.test(email);
                if(!this.hide_error) {
                    axios({
                        method: "get",
                        url: "user/register/sendCode",
                        params: {email,type}
                    })
                        .then(function (value) {
                            if(value.data === 200) {
                                alert("发送成功请查收邮件！");
                            }
                            else{
                                alert("发送次数已达上限，请间隔一小时重试或者换一个邮箱！");
                            }
                        })
                        .catch();
                }

			}
		}
	});
</script>

</body>
</html>
